<template>
    <el-card>
        角色名称
        <el-input v-model="form.roleName" placeholder="请输入角色名称" />
        <el-button type="primary" @click="GetList()">查询</el-button>
    </el-card>


    <el-card>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="roleId" label="主键" width="180" />
            <el-table-column prop="roleName" label="角色名称" width="180" />
            <el-table-column prop="roleStatus" label="角色状态" width="180" />
            <el-table-column prop="roleMemberNumber" label="角色成员数量" width="180" />
            <el-table-column prop="createTime" label="创建时间" width="180" />
            <el-table-column prop="updTime" label="更新时间" width="180" />

            <el-table-column label="操作" width="400">
                <template v-slot="scope">
                    <el-button size="small">设置权限</el-button>
                    <el-button size="small">编辑职务</el-button>
                    <el-button size="small">添加人员</el-button>
                    <el-button size="small">设置状态</el-button>
                    <el-button size="small">复制</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.row.roleId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>


    <el-card>
        <table>
            <tbody>
                <tr>
                    <td>
                        <el-pagination v-model:current-page="page.PageIndex" v-model:page-size="page.PageSize"
                            :page-sizes="[5, 7, 9, 11]" :background="true" layout="total, slot,sizes"
                            :total="page.totalCount" prev-text="上一页" next-text="下一页">
                            <span>
                                当前{{ page.PageIndex }}页，每页{{ page.totalPage }}/{{ page.PageSize }}条
                            </span>
                        </el-pagination>
                    </td>



                    <td>
                        <el-pagination v-model:current-page="page.PageIndex" v-model:page-size="page.PageSize"
                            :page-sizes="[5, 7, 9, 11]" :background="true" layout="slot, prev, pager, next"
                            :total="page.totalCount" prev-text="上一页" next-text="下一页">
                            <span>
                                <el-button type="danger" @click="Shou()">首页</el-button>
                            </span>
                        </el-pagination>
                    </td>




                    <td>
                        <el-pagination v-model:current-page="page.PageIndex" v-model:page-size="page.PageSize"
                            :page-sizes="[5, 7, 9, 11]" :background="true" layout="slot,jumper" :total="page.totalCount"
                            prev-text="上一页" next-text="下一页">
                            <span>
                                <el-button type="danger" @click="Wei()">尾页</el-button>
                            </span>
                        </el-pagination>
                    </td>
                </tr>
            </tbody>
        </table>

    </el-card>

    <el-dialog v-model="showAddRoleDialog" title="新建职务" width="500px">
        <el-form :model="addRoleForm" :rules="addRoleRules" ref="addRoleFormRef" label-width="80px">
            <el-form-item label="职务名称" prop="roleName">
                <el-input v-model="addRoleForm.roleName" placeholder="输入内容" />
            </el-form-item>
            <el-form-item label="职务描述" prop="roleDesc">
               
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="closeAddRoleDialog">取消</el-button>
            <el-button type="primary" @click="onAddRoleSubmit">保存</el-button>
        </template>
    </el-dialog>

    <el-button type="primary" @click="showAddRoleDialog = true">新建职务</el-button>
</template>

<script setup lang="ts">

import { ref, reactive, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import { useRouter } from 'vue-router'

const router = useRouter()

const tableData = ref([])
const form = reactive({
    roleName: '',
})
const page = reactive({
    PageIndex: 1,
    PageSize: 2,
    totalCount: 0,
    totalPage: 0,
})

// 新建职务弹窗相关
const showAddRoleDialog = ref(false)
const addRoleFormRef = ref()
const addRoleForm = reactive({
  roleName: '',

})
const addRoleRules = {
  roleName: [{ required: true, message: '请输入职务名称', trigger: 'blur' }],
  // 你可以根据需要添加更多校验
}

const GetList = () => {
    axios.get("http://localhost:5161/api/RoleManagement/Show", {
        params: {
            PageIndex: page.PageIndex,
            PageSize: page.PageSize,
            roleName: form.roleName
        }
    }).then((res) => {
        tableData.value = res.data.data.data
        page.totalCount = res.data.data.totalCount
        page.totalPage = res.data.data.totalPage
    })
}

const Shou = () => {
    page.PageIndex = 1
    GetList()
}
const Wei = () => {
    page.PageIndex = page.totalPage
    GetList()
}

watch(page, () => {
    GetList()
})
onMounted(() => {
    GetList();
})
const handleDelete = (roleId: number) => {
    ElMessageBox.confirm(
        '此操作将永远删除此角色?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.delete("http://localhost:5153/api/RoleManagement/Del?RoleId=" + roleId).then((res) => {
                if (res.data.code == 0) {
                    ElMessage.success("删除成功")
                    GetList();
                }
                else {
                    ElMessage.error("删除失败")
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已经取消删除',
            })
        })
}

const handleSetPermissions = (roleId: number) => {
    console.log('设置权限', roleId)
}

const handleEditJob = (roleId: number) => {
    console.log('编辑职务', roleId)
}

const handleAddPerson = (roleId: number) => {
    console.log('添加人员', roleId)
}

const handleSetStatus = (roleId: number) => {
    console.log('设置状态', roleId)
}

const handleCopy = (roleId: number) => {
    console.log('复制', roleId)
}

const onAddRoleSubmit = () => {
  addRoleFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
      // 发送POST请求，roleDesc始终为固定字符串
      try {
        const res = await axios.post('http://localhost:5153/api/RoleManagement/AddRole', {
          roleName: addRoleForm.roleName,
     // 这里给一个假的描述
        })
        if (res.data.code === 0) {
          ElMessage.success('添加成功')
          showAddRoleDialog.value = false
          // 清空表单
          addRoleForm.roleName = ''
         
          // 刷新列表
          GetList()
        } else {
          ElMessage.error(res.data.msg || '添加失败')
        }
      } catch (e) {
        ElMessage.error('网络错误，添加失败')
      }
    }
  })
}

const closeAddRoleDialog = () => {
  showAddRoleDialog.value = false
  addRoleForm.roleName = ''
 
}

</script>

<style scoped></style>